<template>
  <div class="section_common">
    <div class="main">
      <el-form ref="form" label-width="100px">
        <el-form-item>
          <el-button id="isAgree" type="primary" size="mini" @click="exportClick">导出excel</el-button>
         </el-form-item>
      </el-form>

      <el-table :data="tableData" height="700" border stripe style="width: 100%">
        <el-table-column prop="jobNum" label="工号" sortable fixed></el-table-column>
        <el-table-column prop="name" label="姓名" fixed> </el-table-column>
        <el-table-column prop="gender" label="性别"> </el-table-column>
        <el-table-column prop="firstDept" label="一级部门" width="180"></el-table-column>
        <el-table-column prop="secondDept" label="二级部门" width="180"> </el-table-column>
        <el-table-column prop="groupId" label="组别" width="150"> </el-table-column>
        <el-table-column prop="position" label="职位" width="180"></el-table-column>
        <el-table-column prop="workPlace" label="工作地点"> </el-table-column>
        <el-table-column prop="enrtyDate" label="入职日期" sortable width="120"> </el-table-column>
        <el-table-column prop="birthday" label="出生年月" width="120"> </el-table-column>
      </el-table>
      <van-pagination @change="selEmpleefile()" v-model="currentPage" :total-items="totalNum" :items-per-page="20" force-ellipses>
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
      </van-pagination>
    </div>
  </div>
</template>

<script>

  import Vue from 'vue';
  import { Toast,Pagination,Icon } from "vant"
  import { Loading } from 'element-ui';

  Vue.use(Loading);
  Vue.use(Pagination);
  Vue.use(Icon);

export default {

  data() {
    return {
      tableData: [],
      exportList:[],
      loading:false,

      nowUser: '',
      title: "员工档案下载",

      exportData: '/mobiles/exportEmployeeFileData',
      currentPage:1,
      totalNum:1

    };
  },
  created() {
    this.nowUser=JSON.parse(localStorage.getItem('userInfo')).userId;
    this.selEmpleefile();
  },

  methods:{

    selEmpleefile(){
      let loadingInstance = Loading.service();
      this.$https.post('/mobiles/selEmployeeFileData',{
        nowUser:this.nowUser,
        currentPage:this.currentPage
      }).then(res => {
        if (res.data.code=='500'){
          Toast(res.data.message);
        }else if(res.data.code=='200'){
            //console.log(res);
            //this.tableData=res.data.data;
          this.totalNum=res.data.data.total;
          this.tableData=res.data.data.records;
        }
        loadingInstance.close();
      }).catch(err => {
        console.log(err)
      });
    },

    //导出报表前的查询
    exportClick(){
      let loadingInstance = Loading.service();
      this.$https.post(this.exportData,{
        nowUser:this.nowUser,
      }).then(res => {
        if (res.data.code=='500'){
          Toast(res.data.message);
        }else{
          this.exportList=res.data.data;
          //执行导出方法
          this.export2Excel();
          Toast("导出成功");
        }
        loadingInstance.close();
        //this.$router.go(-1);
      }).catch(err => {
        console.log(err)
      });
    },

    //导出excel数据
    export2Excel(){

      const tHeader=['工号','姓名','性别','一级部门','二级部门','组别','职位','工作地点','入职日期','出生年月'];
      const filterVal=['jobNum','name','gender','firstDept','secondDept','groupId','position','workPlace','enrtyDate','birthday'];
      const list=this.exportList;
      const data=this.formatJson(filterVal,list);
      const { export_json_to_excel } = require('@/views/hrmanager/excel/export2Excel')
      var time=new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+new Date().getDate()+'-'+new Date().getHours()+'-'+new Date().getMinutes()+'-'+new Date().getSeconds();
      export_json_to_excel(tHeader, data, '员工档案列表'+time);
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },

    // 返回
    goBack() {
      this.$router.go(-1);
    },
  }


};
</script>

<style lang="scss" scoped>

  .main {
    background-color: white;
    .el-form {
      padding-right: 10px;
      .el-form-item {
        .el-form-item__label {
          line-height: 16px;
        }
        margin-bottom: 5px;
      }
    }
  }

</style>